<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- 定义全局变量描述站点名 -->
<c:set var="ctx" value="${pageContext.servletContext.contextPath}" />
<! DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>公告管理 - 人事管理系统</title>
<link rel="icon" href="${ctx}/favicon.ico" type="image/ico">
<meta name="keywords" content="人事管理系统">
<meta name="description" content="人事管理系统">
<meta name="author" content="yinqi">
<link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx}/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/css/style.min.css" rel="stylesheet">
</head>

<body>
	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<jsp:include page="../common/left.jsp"></jsp:include>
			<!--End 左侧导航-->

			<!--头部信息-->
			<jsp:include page="../common/header.jsp"></jsp:include>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">
				<div class="container-fluid">

					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="card-toolbar clearfix">
									<form class="form-inline pull-right" onsubmit="return false;">
										<div class="form-group">
											<input type="text" placeholder="请输入公告标题" class="form-control"
												name="noticetitle" id="noticetitle" />
										</div>
										<div class="form-group">
											<input type="text" placeholder="请输入公告内容" class="form-control"
												name="noticecontent" id="noticecontent" />
										</div>
										<div class="form-group">
											<div class="col-xs-12">
												<select class="form-control" id="noticeuid" name="noticeuid"
													size="1">
													<option value="0">发布用户</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<button class="btn btn-primary" type="button" id="search">搜索</button>
										</div>
									</form>
									<div class="toolbar-btn-action">
										<a class="btn btn-primary m-r-5" data-toggle="modal"
											data-target="#aNotice"><i
											class="mdi mdi-comment-plus-outline"></i>发布公告</a> <a
											class="btn btn-danger" id="delAll"><i
											class="mdi mdi-window-close"></i>删除</a>
									</div>
								</div>
								<div class="card-body">

									<div class="table-responsive">
										<table class="table table-hover table-bordered">
											<thead>
												<tr>
													<th><label class="lyear-checkbox checkbox-primary">
															<input type="checkbox" id="check-all"><span></span>
													</label></th>
													<th>公告标题</th>
													<th>发布用户</th>
													<th>发布时间</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody id="tb">
											</tbody>
										</table>
									</div>

									<!-- 翻页按钮 -->
									<div class="toolbar-btn-action">
										<ul class="pagination" style="display: none;" id="ud">
											<li><a id="homePage" title="首页"><span>«</span></a></li>
											<li class="active"><a id="pre"><span>上一页</span></a></li>
											<li class="active"><a id="next"><span>下一页</span></a></li>
											<li><a id="lastPage" title="尾页"><span>»</span></a></li>
											<li>&nbsp;&nbsp;&nbsp;&nbsp;<input type="number"
												id="number" min="1" style="width: 40px; height: 30px;" />
												<button class="btn btn-primary" type="button" id="tz"
													style="height: 31px; margin-bottom: 6px;">Go</button></li>
											<li><div style="width: 10%;">&nbsp;</div></li>
											<li>&nbsp;当前为第<strong id="indexPage"></strong>页
											</li>
											<li>总共<strong id="total"></strong>页
											</li>
											<li>&nbsp;共查询到<strong id="sum"></strong>条数据
											</li>
										</ul>
									</div>

								</div>
							</div>
						</div>

					</div>

				</div>
			</main>
		</div>
	</div>

	<!--公告添加模态框  -->
	<div class="modal fade bs-example-modal-lg" id="aNotice" tabindex="-1"
		role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入公告标题" class="form-control"
							name="n-title" id="n-title" /> <span
							class="mdi mdi-comment-text form-control-feedback"
							aria-hidden="true"> </span>
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">公告内容:</label>
						<textarea class="form-control" name="n-content" id="n-content"
							placeholder="请输入公告内容"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"
							id="closemodel">关闭</button>
						<button type="button" class="btn btn-primary" id="add">发布</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--公告修改模态框  -->
	<div class="modal fade bs-example-modal-lg" id="modifynotice"
		tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入公告标题" class="form-control"
							name="m-title" id="m-title" /> <span
							class="mdi mdi-comment-text form-control-feedback"
							aria-hidden="true"> </span>
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">公告内容:</label>
						<textarea class="form-control" name="m-content" id="m-content"></textarea>
					</div>
					<input type="text" style="display: none;" name="m-id" id="m-id" />
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"
							id="closeme">关闭</button>
						<button type="button" class="btn btn-primary" id="modify">修改</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--公告查看模态框  -->
	<div class="modal fade bs-example-modal-lg" id="checknotice"
		tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入公告标题" class="form-control"
							name="c-title" id="c-title" /> <span
							class="mdi mdi-comment-text form-control-feedback"
							aria-hidden="true"> </span>
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">公告内容:</label>
						<textarea class="form-control" name="c-content" id="c-content"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"
							id="closeC">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/main.min.js"></script>
	<!--消息提示-->
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script type="text/javascript">
	//定义全局变量
	var indexPage = $("#indexPage"); //当前页
	var total = $("#total"); //总页数
	var sum = $("#sum"); //总数据条数
	var nt = $("#noticetitle"); //公告标题
	var nc = $("#noticecontent"); //公告内容
	var nud = $("#noticeuid"); //发布人
	var $tb = $("#tb"); //表单主体
	var $ud = $("#ud"); //所有翻页按钮

	//点击首页点击事件
	$("#homePage").click(function() {
		lightyear.loading('show');
		//判断是否为首页
		if (indexPage.text() == 1) {
			lightyear.loading('hide');
			lightyear.notify('已经是首页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(1);
			flushData();//刷新数据
		}
	});

	//点击尾页点击事件
	$("#lastPage").click(function() {
		lightyear.loading('show');
		//判断是否为尾页
		if (indexPage.text() == parseInt(total.text())) {
			lightyear.loading('hide');
			lightyear.notify('已经是尾页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(total.text()));
			flushData();//刷新数据
		}
	});

	//点击上一页按钮的单击事件
	$("#pre").click(function() {
		lightyear.loading('show');
		//判断是否为首页
		if (indexPage.text() - 1 < 1) {
			lightyear.loading('hide');
			lightyear.notify('已经是首页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(indexPage.text()) - 1);
			flushData();//刷新数据
		}
	});

	//点击下一页按钮的单击事件
	$("#next").click(function() {
		lightyear.loading('show');
		//判断是否为尾页
		if (indexPage.text() + 1 > total.text()) {
			lightyear.loading('hide');
			lightyear.notify('已经是尾页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(indexPage.text()) + 1);
			flushData();//刷新数据
		}
	});

	//跳转点击事件
	$("#tz").click(function() {
		lightyear.loading('show');
		//获取输入框的值
		var p = $("#number").val();
		//判断输入值是否符合
		if (p < 1 || p > parseInt(total.text())) {
			lightyear.loading('hide');
			lightyear.notify('输入错误,请重新输入!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(p);
			flushData();//刷新数据
		}
	});

	//查看指定公告模态框
	function check(otitle,ocontent){
		//将数据写入输入框
		$("#c-title").val(otitle);
		$("#c-content").val(ocontent);
		//设置不可修改
		$("#c-title").attr( "readonly" , "readonly");
		$("#c-content").attr( "readonly" , "readonly");
	};
	
	//查看模态框按钮点击事件
	$("#closeC").click(function() { 
		//清空赋予的数据
		$("#c-title").val("");
		$("#c-content").val("");
		return;
		});
	
	//修改指定公告模态框
	function modifyNotice(id,otitle,ocontent){
		//将旧数据写入输入框
		$("#m-title").attr( "placeholder" , otitle);
		$("#m-content").attr( "placeholder" , ocontent);
		$("#m-id").val(id);
	};
	
	//修改按钮点击事件
	$("#modify").click(function() { 
		var id = $("#m-id").val();
		var ntitle = $("#m-title").val();
		var ncontent = $("#m-content").val();
		modify(id,ntitle,ncontent); //修改
		//清空填写的数据
		$("#m-id").val("");
		$("#m-title").val("");
		$("#m-content").val("");
		$('#closeme').click(); //关闭模态框
		return;
		});
	
	//修改指定公告
	function modify(id,ntitle,ncontent){
			lightyear.loading('show');
			$.getJSON("modifyNotice",
					{"id":id,"ntitle":ntitle,"ncontent":ncontent},
					function(data){
						if(data.msg=="success"){ //修改成功
							lightyear.loading('hide');
							lightyear.notify('修改成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else if(data.msg=="fail"){ //存在空数据
							lightyear.loading('hide');
							lightyear.notify('请勿输入空数据!', 'danger', 1000);
							//刷新最新的数据
							flushData();
							return;
						}
					});
	};
	
	//删除指定公告
	function del(nid){
		if(confirm('确认要删除吗?')){
			lightyear.loading('show');
			$.getJSON("delNotice",
					{"nid":nid},
					function(data){
						if(data.msg=="success"){ //删除成功
							lightyear.loading('hide');
							lightyear.notify('删除成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}
					});
		};
	};
	
	//删除多个公告
	$("#delAll").click(function() {
		//判断是否有复选框被选中,只留下选中的元素
		var checkedBox = $("input:checkbox[name=ids]:checked");
		if (checkedBox.length < 1) {
			lightyear.notify('请选择一个要删除的公告!', 'warning', 1000);
		} else {
			var notices = new Array();
			$("input:checkbox[name=ids]:checked").each(function () {
				notices.push($(this).val());
			});
			if(confirm('确认要删除吗?')){
				lightyear.loading('show');
				$.getJSON("delNotices",
						{"notices":JSON.stringify(notices)},
						function(data){
							if(data.msg=="success"){ //删除成功
								lightyear.loading('hide');
								lightyear.notify('删除成功~', 'success', 1000);
								//刷新最新的数据
								flushData();
								return;
							}
						});
			}; 
		}
	});
	
	//添加公告模态框点击事件
	$("#add").click(function() { 
		var ntitle = $("#n-title").val();
		var nconent = $("#n-content").val();
		add(ntitle,nconent);
		//清空填写的数据
		$("#n-title").val("");
		$("#n-conent").val("");
		$('#closemodel').click(); //关闭模态框
		return;
	});
	
	//添加公告
	function add(ntitle,nconent){
			lightyear.loading('show');
			$.getJSON("addNotice",
					{"ntitle":ntitle,"nconent":nconent},
					function(data){
						if(data.msg=="success"){ //添加成功
							lightyear.loading('hide');
							lightyear.notify('添加成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else if(data.msg=="fail"){ //存在空数据
							lightyear.loading('hide');
							lightyear.notify('请勿输入空数据!', 'danger', 1000);
							//刷新最新的数据
							flushData();
							return;
						}
					});
	};
	
	//搜索点击事件
	$("#search").on("click", function() {
		lightyear.loading('show');
		//重置当前页的显示
		indexPage.text(1);
		flushData();
		lightyear.loading('hide');
		//清空搜索输入的数据
		nt.val("");
		nc.val("");
		nud.val(0);
	});
	
	//刷新最新数据的
	function flushData() {
		$.ajax({url : "getNotices?pageNo=" + (indexPage.text() ? indexPage.text() : 1) + "&title=" + nt.val() + "&content=" + nc.val() + "&userid=" + nud.val(), //提交到服务器地址
					type : "post", //提交方式
					dataType : "json", //表示服务器端返回的数据一定要是json数据
					success : function(data) { //成功之后自动执行的回调函数
						if (data.msg == "success") { //说明是成功的
							//清空发布用户选择框
							nud.html("");
							nud.append('<option value="0">发布用户</option>');
							//把旧数据清空
							$tb.html("");
							$.each(data.list,function(index, notice) {
												$tb.append('<tr><td><label class="lyear-checkbox checkbox-primary"><input type="checkbox" name="ids" value=" ' + notice.noticeID + '"><span></span></label></td><td>'
																+ notice.title
																+ '</td><td>'
																+ notice.nUserName
																+ '</td><td>'
																+ notice.noticeCreateDate
																+ '</td><td><div class="btn-group"><a class="btn btn-xs btn-default"  title="查看" data-toggle="modal" data-target="#checknotice" onclick="check(\'' + notice.title + '\'\, \'' + notice.content + '\')"><i class="mdi mdi-eye"></i></a><a class="btn btn-xs btn-default" title="修改" data-toggle="modal" data-target="#modifynotice" onclick="modifyNotice(\'' + notice.noticeID + '\'\, \'' + notice.title + '\'\, \'' + notice.content + '\')"><i class="mdi mdi-pencil"></i></a><a class="btn btn-xs btn-default" onclick="del(\'' + notice.noticeID + '\')" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a></div></td></tr>');
												$ud.show(); //将页面按钮显示出来
												var ph = data.ph; //获取页面辅助类对象
												//进行赋值
												indexPage
														.text(ph.pageIndex);
												total
														.text(ph.totalPageSum);
												sum
														.text(ph.totalRecordSum);
											});
						}else{
							//清空发布用户选择框
							nud.html("");
							nud.append('<option value="0">发布用户</option>');
						}
						//如果搜索成功,就把最新的用户数据填入选择框中
						if(data.list != ''){
							$.each(data.users,function(index, user) {
								nud.append( '<option value=" '+ user.uID +' ">' + user.uName + '</option>' );
							});
						}
						//如果查询的数据为空,清空之前的全部数据,并且隐藏所有翻页按钮,判断是否搜索到数据
						if(data.list == ''){ 
							//清空数据
							$tb.html("");
							//清空页数显示
							indexPage.text("");
							total.text("");
							sum.text("");
							$ud.hide(); //隐藏按钮
							lightyear.notify('未搜索到您需要的数据!', 'danger', 1000);
						}
					},
					error : function() { //出错时会自动执行的回调函数
						lightyear.notify('数据查询出现异常!', 'danger', 1000);
					}
				});
	};
	</script>
</body>
</html>
